<template>
    <div class="initLoadingStyle" v-if="initLoadingExit" :style="nowStyle +( loadingStatus ? 'opacity: 1;' : '')">
        <div ref="initLoadingRef" class="lottieStyle"></div>
        <div class="initLoadingTextStyle">等待中...</div>
    </div>
</template>
<script setup>
import lottie from "lottie-web";
import { onMounted,ref,nextTick, onBeforeUnmount,getCurrentInstance, watch} from 'vue'
const props = defineProps(['loadingStatus'])
let initLoadingJson = new URL('@/assets/lotties/initLoading.json', import.meta.url).href
const { proxy } = getCurrentInstance()
let lot = ref()
let initLoadingExit = ref(false)
onMounted(()=>{
    initLoadingBtn()
})
const initLoadingBtn = ()=>{
    if(lot.value != null){
        lot.value.destroy()
    }
    initLoadingExit.value = true
    nextTick(()=>{
        lot.value = lottie.loadAnimation({
            container: proxy.$refs[`initLoadingRef`], //渲染动画所需容器
            renderer: "svg",//动画渲染类型，svg/canvas/html
            loop: true,//是否循环播放，布尔值
            autoplay: false,//是否自动播放，布尔值
            path: initLoadingJson // the path to the animation json
        })
        lot.value.setSpeed(1)
        lot.value.play()
    })
}
const initLoadingClose = ()=>{
    lot.value.destroy()
    initLoadingExit.value = false
}
onBeforeUnmount(()=>{
    initLoadingClose()
})
const timer = ref()
let nowStyle = ref()
watch(()=> props.loadingStatus,(newVal,oldVal) =>{
    if(newVal){
        nowStyle.value = 'z-index: 999;'
    }else if(timer.value == null){
        timer.value = setTimeout(() => {
            nowStyle.value = 'z-index: -999;'
            clearTimeout(timer.value)
            timer.value = null
        }, 150);
    }else{
        nowStyle.value = 'z-index: -999;'
        clearTimeout(timer.value)
        timer.value = null
    }
})
</script>
<style scoped lang="scss">
.initLoadingStyle{
    z-index: -999;
    top: 0;
    left: 0;
    background-color: rgba(46, 46, 46, 0.8);
    color: white;
    width: 100%;
    height: 100%;
    // height: calc(100% - 91px - 5rem);//40+50+1的边
    position: absolute;
    opacity: 0;
    transition: opacity .15s ease-in-out;
    .lottieStyle{
        position: absolute;
        width: 10rem;
        height: 10rem;
        top: calc(50% - 3rem);
        left: 50%;
        transform:translate(-50%,-59%)

    }
    .initLoadingTextStyle{
        position: absolute;
        left: 50%;
        top: 50%;
        transform:translate(-50%,-59%)
    }
}
</style>